<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
import { useCartStore } from '@/stores/cart.js'
const cartStore = useCartStore()
//删除一行数据
const handleDelete = (row) => {
  // console.log(index,row.skuId)
  cartStore.delCartList(row.skuId)
}
//删除多行
const handleClear = () => {
  cartStore.clearCartList()
}
const handleRow = (row, col) => {
  const id = row.id
  // console.log(col)
  if (col.property !== 'operation' && col.property !== 'check')
    router.push(`/detail/${id}`)
  else {
    console.log(row)
  }
}
const goOrder = () => {
  if (cartStore.cartList.every((i) => !i.selected)) {
    ElMessage.error('请选择商品！')
  } else {
    router.push('/order')
  }
}
</script>
<template>
  <!-- 商品部份 -->
  <div v-if="cartStore.cartList?.length > 0">
    <div class="main">
      <div class="title">
        <el-table
          ref="multipleTableRef"
          :data="cartStore.cartList"
          style="width: 100%"
          @row-click="handleRow"
        >
          <el-table-column width="180" prop="check">
            <template #header>
              <el-checkbox
                v-model="cartStore.allSelect"
                @click="cartStore.changeAll"
              ></el-checkbox
            ></template>
            <template #default="scope">
              <el-checkbox v-model="scope.row.selected"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column width="60"
            ><template #default="scope"
              ><img
                style="width: 50px; height: 50px"
                :src="cartStore.cartList[scope.$index].picture"
                alt="" /></template
          ></el-table-column>
          <el-table-column prop="name" label="商品信息" width="200" />
          <el-table-column prop="price" label="单价" width="200" />
          <el-table-column prop="count" label="数量" width="200" />
          <el-table-column prop="totalPrice" label="小计" width="200" />
          <el-table-column prop="operation" label="操作">
            <template #default="scope">
              <el-button
                size="small"
                type="warning"
                @click="handleDelete(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 总计部分 -->
    <div class="floor">
      <p>
        共{{ cartStore.totalNum }}件商品，已选择{{
          cartStore.selectCount
        }}件，商品合计<span style="font-size: 20px; color: red"
          >￥{{ cartStore.selectPrice }}</span
        >
      </p>
      <div>
        <el-button type="success" @click="handleClear">批量删除</el-button>
      </div>
      <div>
        <el-button type="primary" @click="goOrder">结算</el-button>
      </div>
    </div>
  </div>
  <div v-else>
    <el-empty description="购物车为空" />
  </div>
</template>
<style lang="scss" scoped>
.main {
  background-color: #fafafa;
  margin: 10px;
  height: 60vh;
  overflow: auto;
  :deep(.el-checkbox) {
    --el-checkbox-input-height: 25px;
    --el-checkbox-input-width: 25px;
  }
}
.floor {
  background-color: #fafafa;
  margin: 10px;
  height: 10vh;
  display: flex;
  align-items: center;
  p {
    flex: 6;
  }
  div {
    flex: 2;
    button {
      width: 50%;
    }
  }
}
</style>
